<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '24px 16px', height: '100%' }" id="aCardPosition">
      <div class="table-page-search-wrapper">
        <a-row :gutter="48">
          <a-form-model layout="inline" v-model="searchData">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="搜索班级：">
                <a-input v-model="keywords" style="width:80%;" placeholder="请输入班级名称(回车搜索)"
                  @pressEnter="$refs.table1.refresh(true)">
                  <a-tooltip slot="suffix" title="请输入班级名称">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table1.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="关联课程">
                <a-select v-model="searchData.course_id" placeholder="请选择课程" allowClear style="width:80%;">
                  <a-select-option v-for="(item, index) in searchCoursesList" :key="index" :value="item.id">{{ item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="班级教师">
                <a-select v-model="searchData.teacher_id" placeholder="请选择教师" allowClear style="width:80%">
                  <a-select-option v-for="(item, index) in teacherList" :key="index" :value="item.id">{{ item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-form-model>

          <a-form-model v-if="showSearch" layout="inline" style="margin-top:10px;">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="上课教室：">
                <a-select v-model="searchData.classroom_id" allowClear placeholder="请选择教室" style="width:80%">
                  <a-select-option v-for="(item, index) in classroomList" :key="index" :value="item.id">{{ item.name
                    }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-model-item label="结业状态：">
                <a-select v-model="searchData.status" style="width:80%;" placeholder="请选择结业状态" allowClear>
                  <a-select-option :value="1">未结业</a-select-option>
                  <a-select-option :value="2">已结业</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-model-item label="是否排课：">
                <!-- <a-radio-group v-model="searchData.is_arrange_class" style="width:80%;">
                  <a-radio :value="1">已排课</a-radio>
                  <a-radio :value="2">未排课</a-radio>
                </a-radio-group>-->
                <a-checkbox @change="openEnable" :checked="openChecked">已排课</a-checkbox>
                <a-checkbox @change="closeEnable" :checked="closeChecked">未排课</a-checkbox>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <a style="cursor:pointer" v-if="showSearch" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!showSearch" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <!-- <span @click="chaxun">查询</span> -->
      <div class="tableTopActionBtns">
        <a-button type="primary" @click="showDrawer = true">添加班级</a-button>
        <!-- <a-button @click="updateModal=true">导入班级</a-button> -->
        <a-button :disabled="selectedRows.length == 0" @click="endClassDate">批量结业</a-button>
        <!-- <a-button :disabled="selectedRows.length==0" @click="showLevelUpModal">批量升班</a-button> -->
      </div>
      <s-table ref="table1" :rowKey="(record) => record.id" :columns="firstColumns" :data="firstData"
        :pagination="pagination" :loading="loading" :rowSelection="rowSelection" class="user_management_table"
        :scroll="{ x: 1500 }">
        <span slot="name" slot-scope="text,record">
          <a @click="classInfo(record)" v-if="!record.finish_time">{{ text }}</a>
          <span v-else>
            <a @click="$router.push({ name: 'class_info', query: { id: record.id, type: 3 } })">{{ text }}</a>
          </span>
          <span v-if="record.finish_time">(已于{{ record.finish_time | dayjs }}结业)</span>
        </span>

        <span slot="action_" slot-scope="text,record">
          <div v-if="record.status == 2">
            <a @click="delClass(record)">删除</a>
          </div>
          <div v-else>
            <a @click="pathInfo(record.id, 2)" :disabled="record.finish_time">学员管理</a>
            <a-divider type="vertical" />
            <a @click="pathInfo(record.id, 3)" :disabled="record.finish_time">点名</a>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:;">
                更多
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="showConfirm(2, record.id)">结业</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="delClass(record)" :disabled="record.finish_time">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </span>
        <span slot="student_num" slot-scope="text,record">
          <span>
            <span v-if="record.upper_limit && +Number(record.student_num) >= 0">
              <span v-if="Number(record.student_num) > Number(record.upper_limit)" style="color:red;">{{
                record.student_num || '0' }}</span>
              <span v-else>{{ record.student_num || '0' }}</span>
            </span>
            <span v-else-if="+Number(record.student_num) >= 0 && !record.upper_limit">
              <span style="color:red;">{{ record.student_num || '0' }}</span>
            </span>
            /{{ record.upper_limit || '未设置' }}
          </span>
        </span>
        <!-- <span slot="useClass" slot-scope="text,record,index">
          <span ></span>
        </span>-->
      </s-table>
    </a-card>
    <a-drawer title="新建班级" placement="right" @close="onClose" :width="520" :visible="showDrawer"
      :bodyStyle="{ paddingBottom: '80px' }">
      <a-alert message="学员报读一对一课程后，会自动创建一对一班级" banner />
      <a-form-model ref="form" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
        <a-form-model-item label="基本信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
        <a-form-model-item label="班级名称" prop="name">
          <a-input v-model="form.name" placeholder="请输入班级名称" />
        </a-form-model-item>
        <a-form-model-item label="所属校区" prop="structures_id">
          <a-select v-model="form.structures_id" placeholder="请选择所属校区">
            <a-select-option v-for="(item, index) in structuresList" :key="index" :value="item.id">{{ item.name
              }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item prop="course_id">
          <span slot="label">
            关联课程&nbsp;
            <a-tooltip title="购买关联课程的学员可以进班">
              <a-icon type="info-circle" />
            </a-tooltip>
          </span>
          <a-select v-model="form.course_id" :placeholder="!form.structures_id ? '请先选择校区' : '请选择关联课程'"
            :disabled="!form.structures_id">
            <a-select-option v-for="(item, index) in coursesList" :key="index" :value="item.id">{{ item.name
              }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <span slot="label">
            班级容量&nbsp;
            <a-tooltip title="班级容量及班级人数上限">
              <a-icon type="info-circle" />
            </a-tooltip>
          </span>
          <a-input-number :min="0" :max="99999999" v-model="form.upper_limit" />
        </a-form-model-item>
        <!-- <a-form-model-item>
          <span slot="label">
            班级分类&nbsp;
            <a-tooltip title="可在【数据中心-教务数据】按班级分类查看数据">
              <a-icon type="info-circle" />
            </a-tooltip>
          </span>
          <a-select
            v-model="form.category_id"
            placeholder="请选择"
            style="width:200px;margin-right:10px;"
          >
            <a-select-option
              v-for="(item,index) in classifyList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
          <a @click="showChild()">设置</a>
        </a-form-model-item>-->
        <a-form-model-item label="其他信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
        <a-form-model-item prop="teaching_hours">
          <span slot="label">
            授课课时&nbsp;
            <a-tooltip title="设置后,本班级每次点名时“授课课时”默认为该数值">
              <a-icon type="info-circle" />
            </a-tooltip>
          </span>

          <a-input-number :defaultValue="1" :min="1" :max="99999999" v-model="form.teaching_hours" />
        </a-form-model-item>
        <a-form-model-item label="上课教室">
          <a-select v-model="form.classroom_id" :placeholder="!form.structures_id ? '请先选择校区' : '请选择上课教室'"
            style="width:200px;margin-right:10px;" :disabled="!form.structures_id">
            <a-select-option :value="null">不指定</a-select-option>
            <a-select-option v-for="(item, index) in classroomListiii" :key="index" :value="item.id">{{ item.name
              }}</a-select-option>
          </a-select>
          <a href="javascript:;" @click="showClassroom()">设置</a>
        </a-form-model-item>
        <a-form-model-item label="班级老师">
          <a-select mode="multiple" v-model="form.teacher_ids" placeholder="请选择班级老师">
            <a-select-option v-for="(item, index) in teacherList" :key="index" :value="item.id">{{ item.name
              }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input v-model="form.remarks" placeholder="请输入(选填,最多输入100个字符)" :max-length="100" type="textarea" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 7 }">
          <a-button type="primary" @click="onSubmit('form')">确定</a-button>
          <a-button style="margin-left: 10px;" @click="showDrawer = false">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>
    <a-modal :visible="updateModal" :confirmLoading="updateLoading" title="导入班级" @ok="handleUpload"
      @cancel="updateModal = false">
      <div class="updateInfo">
        <div class="line">
          <div class="title">1.下载导入模板，按要求填写信息</div>
          <div>
            <p class="warning_p">1.模板中的表头名称不可更改，表头行不能删除</p>
            <p class="warning_p">2.其中班级名称、关联课程为必填项（仅支持一对多课程）</p>
            <p class="warning_p">3.关联课程、上课教室、班级老师请在下拉框选取</p>
            <p class="warning_p">4.导入文件请不要超过1M</p>
            <a @click="downloadClass">下载班级导入模板</a>
          </div>
        </div>
        <div class="line">
          <div class="title">2.选择需要导入的Excel文件</div>
          <div>
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
              <a-button type="primary" :disabled="fileList.length > 0">添加文件</a-button>
            </a-upload>
          </div>
        </div>
      </div>
    </a-modal>
    <class-type-model ref="class_type" @reload="getSelect"></class-type-model>
    <classroom-components ref="classRoom" @reload="getSelect"></classroom-components>
    <a-modal title="批量升班" :visible="levelUpVisible" width="1800px" :bodyStyle="{ height: '700px' }"
      @cancel="levelUpVisible = false" @ok="levelUpSubmit">
      <a-table :columns="levelUpColumns" :data-source="levelUpData" :pagination="false" :scroll="{ y: 600 }">
        <div slot="newName" slot-scope="text,record,index">
          <a-input v-model="record.newName" @change="changeName(record, index)"></a-input>
          <div v-if="record.flag || record.newName == ''" style="color:red;font-size:10px;">该名称已存在</div>
        </div>

        <div slot="course" slot-scope="text,record">
          <span>{{ record.course_name }}</span>
        </div>
        <div slot="teachers" slot-scope="text,record,index">
          <a-select style="width: 120px" @change="changeCourse(record, index)" v-model="record.teacher_ids"
            mode="multiple">
            <a-select-option v-for="(item, index) in teacherList" :key="index" :value="item.id">{{ item.name
              }}</a-select-option>
          </a-select>
        </div>
        <div slot="upper_limit" slot-scope="text,record,index">
          <a-input-number :min="0" v-model="record.upper_limit" @change="changeCourse(record, index)"></a-input-number>
        </div>

        <div slot="classroom" slot-scope="text,record">
          <span>{{ record.classroom_name }}</span>
        </div>
        <div slot="teachingHours" slot-scope="text,record,index">
          <a-input-number :min="0" v-model="record.teaching_hours"
            @change="changeCourse(record, index)"></a-input-number>
        </div>
        <!-- //班级分类 -->

        <!-- <div slot="category" slot-scope="text,record,index">
          <a-select
            style="width: 120px"
            @change="changeCourse(record,index)"
            v-model="record.class_category_id"
          >
            <a-select-option
              v-for="(item,index) in classifyList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
 
        </div>-->
        <div slot="remarks" slot-scope="text,record,index">
          <a-textarea v-model="record.remarks" placeholder="请输入(选填,最多输入100个字符)" :max-length="100"
            @change="changeCourse(record, index)"></a-textarea>
        </div>
        <div slot="action" slot-scope="text,record,index">
          <a @click="delLevelUp(index)">删除</a>
        </div>
        <!-- <div slot="rule" slot-scope="text,record,index">
          <div v-if="record.flag1">新名称不能与原名称相同</div>
        </div>-->
      </a-table>
    </a-modal>
    <div class="ant-card" style="margin-top: 30px;padding: 30px;">
      <div style="display: flex; justify-content: space-between;">
        <h2>班级管理</h2>
        <a-dropdown-button @click="handleButtonClick">
          可选班级
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"> <a-icon type="book" />wedo</a-menu-item>
            <a-menu-item key="2"> <a-icon type="book" />测试班级</a-menu-item>
          </a-menu>
        </a-dropdown-button>
      </div>
      <div>
        <div class="echart">
          <div class="echart" id="lineDemo" ref="chart" style="width: 1500px;height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import classTypeModel from '@/components/classType'
import classroomComponents from '@/components/classroomManage'
import { teacherList } from '@/api/teacher'
import {
  classList,
  classifyList,
  classCreate,
  classDel,
  endClass,
  testName,
  upClass,
  classexporttemplate,
  graduation,
} from '@/api/class'
import { classroomList } from '@/api/classroom'
import { coursesList } from '@/api/courseCharge'
import { campusList } from '@/api/structure'
import { deepClone } from '@/utils/pub_methods_base'
export default {
  components: {
    STable,
    classTypeModel,
    classroomComponents,
  },
  created() {
    this.getSelect()
  },
  data() {
    return {
      option: {
        title: [
          {
            text: 'webo课程流量',
            x: '25%',
            y: 30,
            textAlign: 'center',
            textStyle: {
              color: '#a1a1a1',
              fontSize: 16,
              fontFamily: 'Microsoft Yahei',
              fontWeight: '100'
            }
          },
          {
            text: '测试课程流量',
            x: '75%',
            y: 30,
            textAlign: 'center',
            textStyle: {
              color: '#a1a1a1',
              fontSize: 16,
              fontFamily: 'Microsoft Yahei',
              fontWeight: '100'
            }
          },
          {
            text: (0.5 * 100).toFixed(0) + '%',
            left: '25%',
            top: '38%',
            textAlign: 'center',
            textStyle: {
              fontSize: '50',
              fontWeight: '300',
              color: '#a06a0a',
              rich: {
                shadow: {
                  color: '#fff',
                  shadowColor: '#fff',
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowOffsetY: 1
                }
              }
            }
          },
          {
            text: (0.5 * 100).toFixed(0) + '%',
            left: '75%',
            top: '38%',
            textAlign: 'center',
            textStyle: {
              fontSize: '50',
              fontWeight: '300',
              color: '#02456d',
              rich: {
                shadow: {
                  color: '#fff',
                  shadowColor: '#fff',
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowOffsetY: 1
                }
              }
            }
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '50%',
            z: 6,
            center: ['25%', '50%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(251, 173, 23, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(251, 173, 23, .2)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(251, 173, 23, 1)'
                  }
                ],
                globalCoord: false
              }
            ],
            data: [0.5, 0.5, 0.5],
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(255, 255, 255, 1)'
            },
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
          {
            name: '第二层白边',
            type: 'pie',
            z: 3,
            radius: ['0%', '55%'],
            center: ['25%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: 'white' // 直接设置为纯白色
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 255, 255, 1)"
                  }
                }
              }
            ]
          },
          {
            name: "最外绿边",
            type: "pie",
            z: 1,
            radius: ["0%", "58%"],
            center: ["25%", "50%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#fdc56e"
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 255, 255, 1)"
                  }
                }
              }
            ]
          },
          {
            type: "liquidFill",
            radius: "50%",
            z: 6,
            center: ["75%", "50%"],
            color: ["#c1dce7", "#90d3f0", "#009bdb"],
            data: [0.6, { value: 0.5, direction: "left" }, 0.4, 0.3],
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(255, 255, 255, 1)"
            },
            label: {
              normal: {
                formatter: ""
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
          {
            name: "第二层白边",
            type: "pie",
            z: 3,
            radius: ["0%", "55%"],
            center: ["75%", "50%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: "white" // 直接设置为纯白色
                  }
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 1)'
                  }
                }
              }
            ]
          },
          {
            name: '最外蓝边',
            type: 'pie',
            z: 1,
            radius: ['0%', '58%'],
            center: ['75%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#07a2e3'
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 1)'
                  }
                }
              }
            ]
          }
        ]
      },
      openChecked: false,
      closeChecked: false,
      updateModal: false,
      fileList: [],
      updateLoading: false,
      loading: false,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      //搜索
      keywords: '',
      pagination: {
        showTotal: total => `共${total}条数据`,
      },
      searchData: {
        // className: '',
        // subjectName: '',
        // teacherName: '',
        school_id: this.$store.state.user.school,
        type: 2,
        keywords: '',
        status: 1
        // classroom: '',
        // isArrang: null
      },
      showSearch: false,
      classPageNo: 1,
      //table数据
      firstColumns: [
        {
          title: '班级名称',
          dataIndex: 'name',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '课程名称',
          dataIndex: 'course_name',
          width: 200,
          ellipsis: true,
        },
        {
          title: '所属校区',
          dataIndex: 'structures.name',
          width: 200,
          ellipsis: true,
        },
        {
          title: '班级老师',
          dataIndex: 'teacher',
          ellipsis: true,
          customRender(text) {
            if (text.length > 0) {
              let arr = []
              text.forEach((val) => {
                arr.push(val.name)
              })
              return arr.join('，')
            } else {
              return '待分配'
            }
          },
        },
        {
          title: '人数/容量',
          dataIndex: 'student_num',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'student_num' },
        },
        // {
        //   title: '已上/排课课次',
        //   dataIndex: 'useClass',
        //   ellipsis: true,
        //   align: 'center',
        //   scopedSlots: { customRender: 'useClass' }
        // },
        {
          title: '已授课时',
          dataIndex: 'already_class_hour',
          ellipsis: true,
          width: 150,
          align: 'center',
          customRender(text) {
            return +Number(text) > 0 ? +Number(text) : '-'
          },
        },
        // {
        //   title: '班级分类',
        //   dataIndex: 'class_category_name',
        //   ellipsis: true,
        //   align: 'center'
        // },
        {
          title: '操作',
          width: 220,
          dataIndex: 'action',
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action_' },
        },
      ],
      firstData: (parameter) => {
        let postData = {}
        for (let key in this.searchData) {
          if (this.searchData[key]) {
            let nature = key
            postData[nature] = this.searchData[key]
          }
        }
        return classList(Object.assign(parameter, postData, { keywords: this.keywords || undefined }))
          .then((res) => {
            this.classPageNo = Number(parameter.pageNo)
            return res
          })
          .catch((err) => {
            this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      //添加班级
      showDrawer: false, //抽屉显示隐藏
      form: {
        name: '',
        course_id: undefined,
        upper_limit: 0,
        teaching_hours: 1,
        type: [],
        remarks: '',
        category_id: undefined,
        classroom_id: null,
        structures_id: undefined,
      }, //添加班级form表单
      rules: {
        name: [{ required: true, message: '请输入班级名称' }],
        course_id: [{ required: true, message: '请选择关联课程' }],
        structures_id: [{ required: true, message: '请选择关联校区' }],
        teaching_hours: [{ required: true, message: '请输入授课课时' }],
      },
      // 抽屉下拉菜单
      searchCoursesList: [], //列表搜索
      structuresList: [],
      coursesList: [],
      classroomList: [],
      classroomListiii: [], //抽屉用教室下拉菜单
      teacherList: [],
      classifyList: [],

      //升班弹窗
      levelUpVisible: false,
      levelUpColumns: [
        {
          title: '原班级名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '新班级名称',
          dataIndex: 'newName',
          scopedSlots: { customRender: 'newName' },
        },
        {
          title: '关联课程',
          dataIndex: 'course',
          scopedSlots: { customRender: 'course' },
        },

        {
          title: '班级老师',
          dataIndex: 'teachers',
          scopedSlots: { customRender: 'teachers' },
        },
        {
          title: '班级容量',
          dataIndex: 'upper_limit',
          scopedSlots: { customRender: 'upper_limit' },
        },
        {
          title: '上课教室',
          dataIndex: 'classroom',
          scopedSlots: { customRender: 'classroom' },
        },
        {
          title: '授课课时',
          dataIndex: 'teachingHours',
          scopedSlots: { customRender: 'teachingHours' },
        },
        // {
        //   title: '班级分类',
        //   dataIndex: 'category',
        //   scopedSlots: { customRender: 'category' }
        // },
        {
          title: '备注',
          dataIndex: 'remarks',
          scopedSlots: { customRender: 'remarks' },
        },
        {
          title: '操作',
          width: 100,
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      levelUpData: [],
    }
  },

  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.finish_time ? true : false,
          },
        }),
      }
    },
  },
  watch: {
    searchData: {
      handler(val) {
        this.$refs.table1.refresh()
      },
      deep: true,
    },
    'form.structures_id'(val) {
      this.form.classroom_id = null
      this.form.course_id = undefined
      coursesList({ pageSize: 999999, school_id: this.$store.state.user.school, is_enable: 1, structures_id: val, type: 2 })
        .then((res) => {
          this.coursesList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取关联课程列表失败')
        })
      classroomList({ pageSize: 999999, school_id: this.$store.state.user.school, structures_id: val })
        .then((res) => {
          this.classroomListiii = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取教室列表失败')
        })
    },
    showDrawer(val) {
      if (val == true) {
        // 调接口
        this.getSelect()
      } else {
        this.form = {
          name: '',
          course_id: undefined,
          upper_limit: 0,
          teaching_hours: 1,
          type: [],
          structures_id: undefined,
          remarks: '',
          category_id: undefined,
          classroom_id: null,
        }
      }
    },
  },
  mounted() {
    const chartDom = document.getElementById('lineDemo')
    const myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {
    handleButtonClick(e) {
      console.log('click', e)
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    showConfirm(status, id) {
      let that = this
      this.$confirm({
        title: '结业提醒',
        content: (h) => <div>班级结业后，学员将被移出班级，并且不能再对此班级排课。是否确定将班级结业？</div>,
        onOk() {
          let ids = []
          ids.push(id)
          graduation({
            ids: ids,
            status: status,
          })
            .then((res) => {
              that.$message.success('结业成功')
              that.$refs.table1.refresh()
            })
            .catch((err) => {
              that.$message.error(err.data.message || '结业失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    beforeUpload(file) {
      this.fileList = [file]
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList = []
        return false
      }
      return false
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleUpload() {
      if (this.fileList.length < 1) {
        this.$message.error('请选择上传文件')
      }
      this.updateLoading = true
      let that = this
      const formData = new FormData()
      formData.append('excel', that.fileList[0])
      formData.append('school_id', this.$store.state.user.school)
      classExcelIn(formData)
        .then((res) => {
          this.updateLoading = false
          this.updateModal = false
          this.$refs.table.refresh()
          this.$message.success('导入成功')
        })
        .catch((err) => {
          this.updateLoading = false
          this.$message.error(err.data.message || '导入失败')
        })
    },
    download(blobUrl, name) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = name
      a.href = blobUrl
      a.click()
      document.body.removeChild(a)
    },
    downloadClass() {
      // window.location.href
      classexporttemplate({ school_id: this.$store.state.user.school })
        .then((res) => {
          let blobUrl = window.URL.createObjectURL(res)
          this.download(blobUrl, '班级导入模板')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '下载导入失败')
        })
    },
    endClassDate() {
      let that = this
      this.$confirm({
        title: '提示',
        content:
          '已选' +
          that.selectedRowKeys.length +
          '个班级结业。班级结业后，学员将被移出班级，并且不能再对此班级排课。是否确定将班级结业？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          endClass({
            ids: that.selectedRowKeys,
            status: 2,
          })
            .then((res) => {
              that.$refs.table1.refresh()
              that.$message.success('结业成功')
            })
            .catch((err) => {
              that.$message.error(err.data.message || '结业失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    pathInfo(e, index) {
      if (index) {
        this.$router.push({ name: 'class_info', query: { id: e, type: index } })
      } else {
        this.$router.push({ name: 'class_info', query: { id: e } })
      }
    },
    search(e) { },
    more() {
      this.showSearch = !this.showSearch
    },
    delClass(e) {
      if (e) {
        let that = this
        this.$confirm({
          title: '提示: 删除班级' + e.name,
          content: '删除后所有学员都将移出该班级,不能恢复',
          okText: '确定',
          okType: 'primary',
          cancelText: '取消',
          onOk() {
            classDel(e.id)
              .then((res) => {
                that.$refs.table1.refresh()

                that.$message.success('删除成功')
              })
              .catch((err) => {
                that.$message.error(err.data.message || '删除失败')
              })
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      } else {
        return false
      }
    },
    //抽屉--添加班级
    onClose() {
      this.showDrawer = !this.showDrawer
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.stringify(this.form)
          let data = JSON.parse(params)
          // let data = deepClone(this.form)
          data.type = 2
          data.school_id = this.$store.state.user.school
          if (data.upper_limit == 0) {
            data.upper_limit = null
          }
          if (data.category_id == '') {
            data.category_id = null
          }
          if (data.classroom_id == '') {
            data.classroom_id = null
          }
          classCreate(data)
            .then((res) => {
              this.$message.success('添加成功')
              this.showDrawer = false
              this.form = {
                name: '',
                course_id: null,
                upper_limit: 0,
                teaching_hours: 1,
                type: [],
                remarks: '',
                category_id: '',
                classroom_id: null,
              }
              this.$refs.table1.refresh(true)
            })
            .catch((err) => {
              this.$message.error(err.data.message || '添加失败')
            })
        } else {
          return false
        }
      })
    },
    getSelect() {
      campusList({ school_id: this.$store.state.user.school }).then((res) => {
        this.structuresList = res
      })
      coursesList({ pageSize: 999999, school_id: this.$store.state.user.school, is_enable: 1, type: 2 }).then((res) => {
        this.searchCoursesList = res.data
      })
      classifyList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.classifyList = res.data
      })
      classroomList({ pageSize: 999999, school_id: this.$store.state.user.school })
        .then((res) => {
          this.classroomList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取教室列表失败')
        })
      if (this.form.structures_id) {
        classroomList({
          pageSize: 999999,
          school_id: this.$store.state.user.school,
          structures_id: this.form.structures_id,
        })
          .then((res) => {
            this.classroomListiii = res.data
          })
          .catch((error) => {
            this.$message.error(err.data.message || '获取教室列表失败')
          })
      }
      teacherList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.teacherList = res.data
      })
    },
    // lookMore(e) {
    //   this.$router.push({ path: '/educationalCenter/classExpand/info', query: { id: e } })
    // },
    showChild() {
      this.$refs.class_type.showModal()
    },
    showClassroom() {
      this.$refs.classRoom.showModal()
    },
    cancel() {
      this.$message.warning('取消删除')
    },
    showLevelUpModal() {
      this.levelUpVisible = true
      let params = JSON.parse(JSON.stringify(this.selectedRows))
      params.forEach((val) => {
        val.newName = val.name
        val.flag = true
      })
      this.levelUpData = params
    },

    //升班验证
    changeName(row, index) {
      if (row.name !== row.newName) {
        testName({
          name: row.newName,
          school_id: this.$store.state.user.school,
        })
          .then((res) => {
            row.flag = res.flag
            this.levelUpData.splice(index, 1, row)
            this.$forceUpdate()
          })
          .catch((err) => {
            row.flag = true
            this.levelUpData.splice(index, 1, row)
            this.$forceUpdate()
          })
      } else {
        row.flag = true
        this.levelUpData.splice(index, 1, row)
        this.$forceUpdate()
      }
    },
    changeCourse(e, index) {
      this.levelUpData.splice(index, 1, e)
      this.$forceUpdate()
    },
    delLevelUp(index) {
      this.levelUpData.splice(index, 1)
      this.$forceUpdate()
    },
    levelUpSubmit() {
      if (this.levelUpData.length == 0) {
        this.levelUpVisible = false
      } else {
        this.levelUpData.forEach((val) => {
          if (val.flag == true) {
            this.$message.error('有班级名称与现存班级名称相同,请修改后再提交')
            return
          }
        })
        let params = JSON.parse(JSON.stringify(this.levelUpData))
        params.forEach((val) => {
          val.class_id = val.id
          val.name = val.newName
          val.category_id = val.class_category_id
          val.teacher = val.teacher_ids
        })
        upClass({
          data: params,
          school_id: this.$store.state.user.school,
        })
          .then((res) => {
            this.$message.success('升班成功~')
            this.levelUpVisible = false
            this.$refs.table1.refresh()
          })
          .catch((err) => {
            this.$message.error(err.data.message || '升班失败')
          })
      }
      //
    },
    openEnable(e) {
      if (e.target.checked == true) {
        this.closeChecked = false
        this.searchData.is_arrange_class = 1
        this.openChecked = true
      } else {
        this.searchData.is_arrange_class = null
        this.openChecked = false
      }
      this.$refs.table1.refresh()
    },
    closeEnable(e) {
      if (e.target.checked == true) {
        this.openChecked = false
        this.searchData.is_arrange_class = 2
        this.closeChecked = true
      } else {
        this.searchData.is_arrange_class = null
        this.closeChecked = false
      }
      this.$refs.table1.refresh()
    },
    classInfo(data) {
      // let sessionPageNo = JSON.parse(sessionStorage.getItem('sessionPageNo'))
      // if(sessionPageNo){
      //   sessionPageNo.classPageNo=this.classPageNo
      //   sessionStorage.setItem("sessionPageNo",JSON.stringify(sessionPageNo))
      // }
      // else{
      sessionStorage.setItem("sessionPageNo", JSON.stringify({ classPageNo: this.classPageNo }));
      // }
      this.$router.push({ name: 'class_info', query: { id: data.id } })
    }
  },
}
</script>
<style lang="less">
.form_title {
  div {
    label {
      font-size: 16px !important;
    }
  }
}
</style>
<style lang="less" scoped>
#aCardPosition {
  position: relative;
}

#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}

.searchBtn {
  margin: 16px 20px 16px 0;
}

.tableTopActionBtns {

  // border-top: 1px solid #e8e8e8;
  button {
    margin: 0 20px 16px 0;
  }
}

.expand_warning {
  margin: 16px 0;
  background-color: #fff0e7;
  border-radius: 4px;
}

.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}

.btn_margin {
  margin-right: 10px;
}

.updateInfo {
  .line {
    margin-bottom: 16px;

    .title {
      margin-bottom: 3px;
    }

    div {
      .warning_p {
        font-size: 10px;
        color: #faad14;
        padding: 0 2px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>